<template>  
  <div class="svg-warper"> 
    <div class="legend-warper">
      <div class="title">图例</div>
      <div class="legend-item">
        <div class="item-img img1"></div>
        <div class="item-name">水库</div>
      </div>
      <div class="legend-item">
        <div class="item-img img2"></div>
        <div class="item-name">泵站</div>
      </div>
      <div class="legend-item">
        <div class="item-img img3"></div>
        <div class="item-name">水闸</div>
      </div>
      <div class="legend-item">
        <div class="item-img img4"></div>
        <div class="item-name">高位水池</div>
      </div>
    </div> 
    <div class="svg-container">
      <svg width="100%" height="700"></svg>
    </div>
  </div>  
</template>

<script>  
import * as d3 from "d3";
import img1 from '@/assets/image/gsw.png';
import img2 from '@/assets/image/sz.png';
import img3 from '@/assets/image/sk.png';
import img4 from '@/assets/image/bz.png';
import img5 from '@/assets/image/sz1.png';
// import {resultsSeq, querySchedulingByCode} from "@/api";
export default {  
  props:['dataType','playTime','dispatchDataObj'],
  data() {  
    return { 
      svg:null,
      startX: 160,
      startY: 20,
      rectWidth: 200,
      rectHeight: 20,
      rotatex:0,
      rotatey:0, 
      needWaterObj:{ // 干渠需水满足率
        ZSSZ01: null, // 地豆冲支渠需水满足率 ZSSZ01
        XGSZ01: null, // 地豆冲引水渠需水满足率 XGSZ01
        BZ1: null, // 蒙山泵站需水满足率 BZ1
        XGSZ03: null, // 二级干渠需水满足率 XGSZ03
        XGSZ06: null, // 石龙干渠需水满足率 XGSZ06
        XGSZ07: null, // 总干渠需水满足率  XGSZ07
        ZSSZ06: null, // 六和干渠需水满足率 ZSSZ06
        ZSSZ03: null, // 利民支渠需水满足率 ZSSZ03
        ZSSZ09: null, // 塘肚支渠需水满足率 ZSSZ09
        XGSZ04: null // 六和补水渠需水满足率 XGSZ04
      },
      waterLevelObj: { // 水库水位
        SK01: null, // 地豆冲水位
        SK02: null,  // 蒙山水位
        SK03: null,  // 蟠龙水位
        SK04: null   // 六和水位
      },
      pumpObj: { // 泵站配水
        BZ1: {
          x:0,
          y:0,
          flag:'add',
          ps: null,
          sw: null,
          ll: null
        },
        BZ2: {
          x:0,
          y:0,
          flag:'add',
          ps: null,
          sw: null,
          ll: null
        }
      },
      ZSSZ01: { // 地豆冲支渠控制闸  ZSSZ01
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ02: { // 地豆冲引水渠控制闸 ZSSZ02
        x:0,
        y:0,
        flag:'reduce',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ04: { // 二级干渠分水闸 ZSSZ04
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ05: { // 二级干渠控制闸 ZSSZ05
        x:0,
        y:0,
        flag:'reduce',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ08: { // 石龙干渠控制闸 ZSSZ08
        x:0,
        y:0,
        flag:'reduce',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ07: { // 六和补水渠控制闸 ZSSZ07
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ06: { // 六和干渠控制闸 ZSSZ06
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ09: { // 塘肚支渠控制闸 ZSSZ09
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ10: { // 蟠龙总干渠控制闸 ZSSZ10
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      ZSSZ03: { // 利民支渠控制闸 ZSSZ03
        x:0,
        y:0,
        flag:'add',
        sw: null,
        ll: null,
        kd: null
      },
      originData:[], // 请求的原始数据
      transform: null, // 平移缩放
      hasDispatch: false
    }
  },  
  watch: {
    dataType: {
      handler: function (val) {
        this.type = val.type;
        this.subType = val.dateType;
        // this.getData()
      },
      deep: true,
    },
    playTime: {
      handler: function (val) {
        if (val > -1) {
          // console.log('当前播放序号：' + val)
          // 加载水库水位信息
          this.loadSKInfo(val)
          // 加载泵站配水
          this.loadBZInfo(val)
          // 绘制水闸水位、流量、开度
          this.loadSZInfo(val)
          // 展示需水满足率
          this.loadNeedWaterInfo(val)
        } else {
          // console.log('当前播放序号：' + val)
          // 清除水库水位信息
          this.clearSKInfo()
          // 清除泵站配水
          this.clearBZInfo()
          // 清除水闸水位、流量、开度
          this.clearSZInfo()
          // 清除需水满足率
          this.clearNeedWaterInfo()
        }
      },
      deep: true,
    },
    dispatchDataObj:{
      handler: function (val) {
        this.dispatchData = val.dispatchData
        // this.reloadData(val.planType)
      },
      deep: true,
    },
  },
  mounted() {  
    this.render();
  },  
  created() {
    
  },
  methods: { 
    async reloadData(playType) {
    //   const data = await resultsSeq({dpcd: playType})
    //   if (data) {
    //     const timeArray = []
    //     for (let i = 0; i < data.length; i ++) {
    //       timeArray.push(data[i].tm)
    //     }
    //     this.originData = data
    //     if (this.hasDispatch) {
    //       this.showTotalNeedWater();
    //     }
    //     this.$emit('change', timeArray)
    //   }
    //   // 更新数据
    //   if (this.playTime > -1) {
    //     // console.log('当前播放序号：' + val)
    //     // 加载水库水位信息
    //     this.loadSKInfo(this.playTime)
    //     // 加载泵站配水
    //     this.loadBZInfo(this.playTime)
    //     // 绘制水闸水位、流量、开度
    //     this.loadSZInfo(this.playTime)
    //     // 展示需水满足率
    //     this.loadNeedWaterInfo(this.playTime)
    //   }
    },
    // 加载水库水位信息
    loadSKInfo(index) {
      if (index > -1 && index < this.originData.length) {
        const waterData = this.originData[index] ? this.originData[index].resList : [];
        for (let i = 0; i < waterData.length; i++) {
          if (waterData[i].rz || waterData[i].rz === 0) {
            this.showWaterLevel(this.waterLevelObj[waterData[i].nodeId], `水位${waterData[i].rz}m`)
          } else {
            this.waterLevelObj[waterData[i].nodeId].style('display','none')
          }
        }
      }
    },
    // 清除水库水位信息
    clearSKInfo() {
      for (let attr in this.waterLevelObj) {
        this.waterLevelObj[attr].style('display','none')
      }
    },
    // 加载泵站配水信息
    loadBZInfo(index) {
      if (index > -1 && index < this.originData.length) {
        const waterData = this.originData[index] ? this.originData[index].nodeList : [];
        for (let i = 0; i < waterData.length; i++) {
          if (waterData[i].nodeId === 'BZ1' || waterData[i].nodeId === 'BZ2') {
            if (waterData[i].dw || waterData[i].dw === 0) {
                // 获取水位和流量
                let swValue = '', llValue = '';
                const zList = this.originData[index] ? this.originData[index].zlist : [];
                for (let j = 0; j < zList.length; j++) {
                  if (waterData[i].nodeId === zList[j].nodeId) {
                    swValue = zList[j].z;
                    llValue = zList[j].q;
                    break;
                  }
                }
                // 配水、水位、流量
                this.showDrawBzInfo(this.pumpObj[waterData[i].nodeId], waterData[i].dw, swValue, llValue)
            }
          }
        }
      }
    },
    // 清除泵站配水信息
    clearBZInfo() {
      // for (let attr in this.pumpObj) {
      //   this.pumpObj[attr].style('display','none')
      // }
      const data = ['BZ1','BZ2'];
      for (let i = 0; i < data.length; i++) {
        if(this.pumpObj[data[i]]) {
          if (this.pumpObj[data[i]].ps) {
            this.pumpObj[data[i]].ps.remove();
          }
          if (this.pumpObj[data[i]].sw) {
            this.pumpObj[data[i]].sw.remove();
          }
          if (this.pumpObj[data[i]].ll) {
            this.pumpObj[data[i]].ll.remove();
          }
        }
      }
    },
    // 绘制水闸水位、流量、开度
    loadSZInfo(index) {
      const data = ['ZSSZ01','ZSSZ02','ZSSZ03','ZSSZ04','ZSSZ05','ZSSZ06','ZSSZ07','ZSSZ08','ZSSZ09','ZSSZ10']
      if (index > -1 && index < this.originData.length) {
        const waterData = this.originData[index] ? this.originData[index].nodeList : [];
        for (let i = 0; i < waterData.length; i++) {
          if (data.includes(waterData[i].nodeId)) {
            // 获取开度数据
            let kdValue = ''
            const runList = this.originData[index] ? this.originData[index].runList : [];
            for (let j = 0; j < runList.length; j++) {
              if (waterData[i].nodeId === runList[j].nodeId) {
                kdValue = runList[j].openOfSluice;
                break;
              }
            }
            let swValue = '', llValue = '';
            const zList = this.originData[index] ? this.originData[index].zlist : [];
            for (let j = 0; j < zList.length; j++) {
              if (waterData[i].nodeId === zList[j].nodeId) {
                swValue = zList[j].z;
                llValue = zList[j].q;
                break;
              }
            }
            // 水位、流量、开度
            this.showDrawFlowWaterInfo(this[waterData[i].nodeId], swValue, llValue, kdValue)
          }
        }
      }
    },
    // 清除水闸水位、流量、开度
    clearSZInfo() {
      const data = ['ZSSZ01','ZSSZ02','ZSSZ03','ZSSZ04','ZSSZ05','ZSSZ06','ZSSZ07','ZSSZ08','ZSSZ09','ZSSZ10']
      for (let i = 0; i < data.length; i++) {
        if(this[data[i]]) {
          if (this[data[i]].sw) {
            this[data[i]].sw.remove();
          }
          if (this[data[i]].ll) {
            this[data[i]].ll.remove();
          }
          if (this[data[i]].kd) {
            this[data[i]].kd.remove();
          }
        }
      }
    },
    // 展示需水满足率
    loadNeedWaterInfo(index) {
      const data = ['ZSSZ01','XGSZ01','BZ1','XGSZ03','XGSZ06','XGSZ07','ZSSZ06','ZSSZ03','ZSSZ09','XGSZ04']
      if (index > -1 && index < this.originData.length) {
        for (let t = 0; t < data.length; t++) {
          for (let i = 0; i < this.dispatchData.length; i++) {
            if (data[t] === this.dispatchData[i].nodeId) {
              // 计算需水满足率
              let value = ''
              if (this.dispatchData[i].needWater && this.dispatchData[i].needWater > 0) {
                value = (this.dispatchData[i].distributionWater/this.dispatchData[i].needWater) * 100;
                value = value.toFixed(2)
                this.showNeedWaterRatio(this.needWaterObj[data[t]], value,data[t]);
              } else {
                this.showNeedWaterRatio(this.needWaterObj[data[t]], value,data[t]);
              }
            }
          }
        }
        // const waterData = this.originData[index] ? this.originData[index].nodeList : [];
        // for (let i = 0; i < waterData.length; i++) {
        //   if (data.includes(waterData[i].nodeId)) {
        //     // 需水量
        //     this.showNeedWaterRatio(this.needWaterObj[waterData[i].nodeId], waterData[i].nw)
        //   }
        // }
      }
    },
    // 展示总体的需水量
    showTotalNeedWater() {
      const data = ['ZSSZ01','XGSZ01','BZ1','XGSZ03','XGSZ06','XGSZ07','ZSSZ06','ZSSZ03','ZSSZ09','XGSZ04']
      const obj = {
        ZSSZ01:0,
        XGSZ01:0,
        BZ1:0,
        XGSZ03:0,
        XGSZ06:0,
        XGSZ07:0,
        ZSSZ06:0,
        ZSSZ03:0,
        ZSSZ09:0,
        XGSZ04:0
      }
      if (!this.originData) {
        for (let attr in this.needWaterObj) {
          this.needWaterObj[attr].style('display','inline')
          this.needWaterObj[attr].select("text").text('').style('font-weight','bold').style('fill','#ffffff')
          if (this.transform) {
            this.needWaterObj[attr].attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
          }
        }
      } else {
        for (let index = 0; index < this.originData.length; index++) {
          const waterData = this.originData[index] ? this.originData[index].nodeList : [];
          for (let i = 0; i < waterData.length; i++) {
            if (data.includes(waterData[i].nodeId)) {
              // 需水量
              if (waterData[i].nw) {
                obj[waterData[i].nodeId] = obj[waterData[i].nodeId] + waterData[i].nw
              }
            }
          }
        }
        for(let i = 0; i < data.length; i++) {
          this.showNeedWaterRatio(this.needWaterObj[data[i]], obj[data[i]], data[i])
        }
      }
    },
    // 清除需水满足率
    clearNeedWaterInfo() {
      // for (let attr in this.needWaterObj) {
      //   this.needWaterObj[attr].style('display','none')
      // }
      if (this.hasDispatch) {
        this.showTotalNeedWater();
      } else {
        for (let attr in this.needWaterObj) {
          this.needWaterObj[attr].style('display','inline')
          this.needWaterObj[attr].select("text").text('').style('font-weight','bold').style('fill','#ffffff')
          if (this.transform) {
            this.needWaterObj[attr].attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
          }
        }
      }
    },
    // 获取页面数据
    async getData() {
    //   const res = await querySchedulingByCode({dpcd: this.subType})
    //   if (res) {
    //     if (res && res.length > 0) {
    //       this.hasDispatch = true
    //     } else {
    //       this.hasDispatch = false
    //     }
    //   } else {
    //     this.hasDispatch = false
    //   }
    //   const data = await resultsSeq({dpcd: this.subType})
    //   if (data) {
    //     const timeArray = []
    //     for (let i = 0; i < data.length; i ++) {
    //       timeArray.push(data[i].tm)
    //     }
    //     this.originData = data
    //     if (this.hasDispatch) {
    //       this.showTotalNeedWater();
    //     } else {
    //       for (let attr in this.needWaterObj) {
    //         this.needWaterObj[attr].style('display','inline')
    //         this.needWaterObj[attr].select("text").text('').style('font-weight','bold').style('fill','#ffffff')
    //         if (this.transform) {
    //           this.needWaterObj[attr].attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
    //         }
    //       }
    //     }
    //     this.$emit('change', timeArray)
    //   }
    },
    render() {  
      const svg = d3.select('svg');
      this.svg = svg;
      // 创建一个缩放行为
      const zoom = d3.zoom()
          .scaleExtent([0.1, 10]) // 设置缩放范围
          .on("zoom", zoomed);
      
      // 应用缩放行为到 SVG
      svg.call(zoom);

      // 定义一个缩放函数
      const _that = this;
      function zoomed(event) {
        // 获取缩放和平移的变换
        const transform = event.transform;
        _that.transform = transform
        // console.log(transform)
        svg.selectAll('.line-group')
            .attr('transform', `translate(${transform.x}, ${transform.y}) scale(${transform.k})`);
        svg.selectAll('.line-group-green')
            .attr('transform', `translate(${transform.x}, ${transform.y}) scale(${transform.k})`);
        svg.selectAll('.rotate-group').attr('transform', `rotate(60, ${(_that.rotatex) * transform.k + transform.x}, ${(_that.rotatey) * transform.k + transform.y}) translate(${transform.x}, ${transform.y}) scale(${transform.k})`);
        svg.selectAll('.rotate-group1').attr('transform', `rotate(-30, ${(_that.rotatex) * transform.k + transform.x}, ${(_that.rotatey) * transform.k + transform.y}) translate(${transform.x}, ${transform.y}) scale(${transform.k})`);
      }
      let offHeight = 0, offWidth = 0;
      // 地豆冲支渠
      this.drawRectWithLineArraw(svg, this.startX + 30, this.startY, this.rectHeight, this.startY + 160, 'top', 1, '#00442c','#07746c','arrow-mark-green', 'dashed-line-green');
      let name = '地豆冲支渠'
      const nameArray = name.split('')
      for (let i = 0; i < nameArray.length; i++) {
        this.addFontText(svg, this.startX + 15 , this.startY + 30 + i * 25, nameArray[i], '#029699');
      }
      // 需水满足率[显隐]
      this.needWaterObj.ZSSZ01 = this.addNeedWater(svg, offWidth + 195, offHeight + 70, 120, 30, "#07746c",'ZSSZ01');
      this.needWaterObj.ZSSZ01.style('display','inline');

      // 地豆冲支渠控制闸
      offHeight = offHeight + 180
      this.addImage(svg, this.startX + 40, this.startY + offHeight, img2, 50, 50, 1)
      this.addFontText(svg, this.startX + 150 , offHeight + 20, '地豆冲支渠控制闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ01.x = this.startX + 130
      this.ZSSZ01.y = offHeight + 20

      // 箭头
      offHeight = offHeight + 10
      this.addArrowOnly(svg, this.startX + 40, offHeight + 20, 0, 50, 'top', 1);

      // 地豆冲水库
      offHeight = offHeight + 100
      this.addImage(svg, this.startX + 40, offHeight, img3, 50, 50, 2)
      this.addFontText(svg, this.startX + 120 , offHeight, '地豆冲水库', '#ffffff');
      // 水位信息[显隐]
      this.waterLevelObj.SK01 = this.addFontText(svg, this.startX + 120 , offHeight + 20, '', '#ffffff');
      this.waterLevelObj.SK01.style('display','none');
      // 地豆冲引水渠
      offHeight = offHeight + 30
      this.drawRectWithLineArraw(svg, this.startX + 30, offHeight, this.rectHeight, this.startY + 180, 'top', 2, '#00442c','#07746c','arrow-mark-green', 'dashed-line-green');
      let name1 = '地豆冲引水渠'
      const nameArray1 = name1.split('')
      for (let i = 0; i < nameArray1.length; i++) {
        this.addFontText(svg, this.startX + 15 , offHeight + 30 + i * 25, nameArray1[i], '#029699');
      }

      // 需水满足率[显隐]
      this.needWaterObj.XGSZ01 = this.addNeedWater(svg, offWidth + 195, offHeight + 50, 120, 30, "#07746c",'XGSZ01');
      this.needWaterObj.XGSZ01.style('display','inline');

      // 地豆冲引水渠控制闸
      offHeight = offHeight + 200
      this.addImage(svg, this.startX + 40, offHeight, img2, 50, 50, 3)
      this.addFontText(svg, this.startX + 170 , offHeight, '地豆冲引水渠控制闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ02.x = this.startX + 130
      this.ZSSZ02.y = offHeight

      // 二级干渠
      offHeight = offHeight + 20
      this.drawRectWithLineArraw(svg, 20, offHeight, 480, this.rectHeight, 'left', 3, '','','arrow-mark', 'dashed-line');
      this.addFontText(svg, this.startX + 125 , offHeight + 40, '二级干渠', '#0276d6');

      // 需水满足率[显隐]
      this.needWaterObj.XGSZ03 = this.addNeedWater(svg, 50, offHeight - 7, 50, 30, "#07746c",'XGSZ03');
      this.needWaterObj.XGSZ03.style('display','inline');
      
      // 二级干渠分水闸
      offHeight = offHeight + 10
      offWidth = offWidth + 520
      this.addImage(svg, offWidth, offHeight, img5, 50, 50, 4)
      this.addFontText(svg, offWidth , offHeight + 45, '二级干渠分水闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ04.x = offWidth
      this.ZSSZ04.y =  offHeight + 45

      let twoOffHeight = offHeight - 120, twoOffWidth = offWidth
      this.addArrowOnly(svg, twoOffWidth, twoOffHeight, 0, 100, 'top', 100);
      // 蒙山补水泵站
      twoOffHeight = twoOffHeight - 20
      this.addImage(svg, twoOffWidth, twoOffHeight, img4, 50, 50, 100)
      this.addFontText(svg, twoOffWidth + 90 , twoOffHeight, '蒙山补水泵站', '#ffffff');
      // 配水信息[显隐]
      // this.pumpObj.BZ2 = this.addFontText(svg, twoOffWidth + 90 , twoOffHeight + 20, '', '#ffffff');
      // this.pumpObj.BZ2.style('display','none');
      this.pumpObj.BZ2.x = twoOffWidth + 90
      this.pumpObj.BZ2.y = twoOffHeight

      // 箭头
      twoOffHeight = twoOffHeight - 70
      this.addArrowOnly(svg, twoOffWidth, twoOffHeight, 0, 50, 'top', 101);
      // 蒙山泵站
      twoOffHeight = twoOffHeight - 20
      this.addImage(svg, twoOffWidth, twoOffHeight, img4, 50, 50, 101)
      this.addFontText(svg, twoOffWidth + 70 , twoOffHeight, '蒙山泵站', '#ffffff');
      // 配水信息[显隐]
      this.pumpObj.BZ1.x = twoOffWidth + 85;
      this.pumpObj.BZ1.y = twoOffHeight;
      // this.pumpObj.BZ1 = this.addFontText(svg, twoOffWidth + 85 , twoOffHeight + 20, '', '#ffffff');
      // this.pumpObj.BZ1.style('display','none');

      // 需水满足率[显隐]
      this.needWaterObj.BZ1 = this.addNeedWater(svg, twoOffWidth + 110, twoOffHeight - 15, 120, 30, "#07746c",'BZ1');
      this.needWaterObj.BZ1.style('display','inline');

      // 箭头
      twoOffHeight = twoOffHeight - 70
      this.addArrowOnly(svg, twoOffWidth, twoOffHeight, 0, 50, 'top', 102);
      // 高位水池
      twoOffHeight = twoOffHeight - 20
      this.addImage(svg, twoOffWidth, twoOffHeight, img1, 50, 50, 102)
      this.addFontText(svg, twoOffWidth + 70 , twoOffHeight, '高位水池', '#ffffff');
      // 蒙山水库箭头
      twoOffHeight = twoOffHeight + 90
      twoOffWidth = twoOffWidth - 110
      this.addArrowOnly(svg, twoOffWidth, twoOffHeight, 100, 0, 'right', 103);
      // 蒙山水库
      twoOffWidth = twoOffWidth - 15
      this.addImage(svg, twoOffWidth, twoOffHeight, img3, 50, 50, 105)
      this.addFontText(svg, twoOffWidth , twoOffHeight + 40, '蒙山水库', '#ffffff');
      // 水位信息[显隐]
      this.waterLevelObj.SK02 = this.addFontText(svg, twoOffWidth , twoOffHeight + 60, '', '#ffffff');
      this.waterLevelObj.SK02.style('display','none');

      // 右侧二级干渠
      offHeight = offHeight - 10
      offWidth = offWidth + 20
      this.drawRectWithLineArraw(svg, offWidth, offHeight, 150, this.rectHeight, 'left', 4, '','','arrow-mark', 'dashed-line');
    
      // 二级干渠控制闸
      offHeight = offHeight + 10
      offWidth = offWidth + 170
      this.addImage(svg, offWidth, offHeight, img5, 50, 50, 5)
      this.addFontText(svg, offWidth -20 , offHeight - 65, '二级干渠', '#879094');
      this.addFontText(svg, offWidth -10 , offHeight - 40, '控制闸', '#879094');

      // 水位流量开度[显隐]
      this.ZSSZ05.x = offWidth -10
      this.ZSSZ05.y =  offHeight - 65
    
      // 石龙干渠控制闸
      offHeight = offHeight
      offWidth = offWidth + 60
      this.addImage(svg, offWidth, offHeight, img5, 50, 50, 5)
      this.addFontText(svg, offWidth +20 , offHeight - 65, '石龙干渠', '#879094');
      this.addFontText(svg, offWidth +10 , offHeight - 40, '控制闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ08.x = offWidth +50
      this.ZSSZ08.y =  offHeight - 65

      // 石龙干渠
      offHeight = offHeight - 10
      offWidth = offWidth + 20
      this.drawRectWithLineArraw(svg, offWidth, offHeight, 450, this.rectHeight, 'right', 5, '','','arrow-mark', 'dashed-line');
      this.addFontText(svg, offWidth + 100 , offHeight - 10, '石龙干渠', '#0276d6');
      // 需水满足率[显隐]
      this.needWaterObj.XGSZ06 = this.addNeedWater(svg, offWidth + 150, offHeight - 7, 120, 30, "#07746c",'XGSZ06');
      this.needWaterObj.XGSZ06.style('display','inline');

      // 六和补水渠控制闸
      this.addImage(svg, offWidth + 50, offHeight + 35, img2, 50, 50, 5)
      this.addFontText(svg, offWidth + 160 , offHeight + 35, '六和补水渠控制闸', '#879094');
       // 水位流量开度[显隐]
      this.ZSSZ07.x = offWidth + 200
      this.ZSSZ07.y = offHeight + 35

      const liuheX = offWidth - 40, liuheY = offHeight + 75
      // 元素旋转示例
      this.rotatex = offWidth + 10;
      this.rotatey = offHeight + 110;
      
      
      // 六和干渠
      offHeight = offHeight + 170
      this.drawRectWithLineArraw(svg, 60, offHeight, 460, this.rectHeight, 'left', 6, '','','arrow-mark', 'dashed-line');
      this.addFontText(svg, this.startX + 155 , offHeight - 15, '六和干渠', '#0276d6');
      // 需水满足率[显隐]
      this.needWaterObj.ZSSZ06 = this.addNeedWater(svg, 120, offHeight - 7, 120, 30, "#07746c",'ZSSZ06');
      this.needWaterObj.ZSSZ06.style('display','inline');

      // 六和干渠控制闸
      offHeight = offHeight + 10
      offWidth = offWidth - 290
      this.addImage(svg, offWidth, offHeight, img5, 50, 50, 5)
      this.addFontText(svg, offWidth -5 , offHeight + 40, '六和干渠', '#879094');
      this.addFontText(svg, offWidth - 5 , offHeight + 65, '控制闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ06.x = offWidth - 5
      this.ZSSZ06.y = offHeight + 65

      // 箭头
      offHeight = offHeight
      offWidth = offWidth + 10
      this.addArrowOnly(svg, offWidth, offHeight, 80, 0, 'left', 21);

      // 六合水库
      offHeight = offHeight
      offWidth = offWidth + 95
      this.addImage(svg, offWidth, offHeight, img3, 50, 50, 51)
      this.addFontText(svg, offWidth + 5 , offHeight + 40, '六合水库', '#ffffff');
      // 水位信息[显隐]
      this.waterLevelObj.SK03 = this.addFontText(svg, offWidth + 5 , offHeight + 60, '', '#ffffff');
      this.waterLevelObj.SK03.style('display','none');

      // 利民支渠图
      offHeight = offHeight + 30
      offWidth = offWidth - 300
      this.addImage(svg, offWidth, offHeight, img2, 50, 50, 51)
      this.addFontText(svg, offWidth - 100 , offHeight, '利民支渠控制闸', '#879094');
      this.ZSSZ03.x = offWidth - 110
      this.ZSSZ03.y = offHeight
      // 利民支渠图
      offHeight = offHeight + 17
      offWidth = offWidth - 10
      this.drawRectWithLineArraw(svg, offWidth, offHeight, this.rectHeight, 120, 'bottom', 24, '#00442c','#07746c','arrow-mark-green', 'dashed-line-green');
      this.addFontText(svg, offWidth + 80, offHeight + 10, '利民支渠', '#879094');
      // let name2 = '利民支渠'
      // const nameArray2 = name2.split('')
      // for (let i = 0; i < nameArray2.length; i++) {
      //   this.addFontText(svg, offWidth - 15 , offHeight + 35 + i * 25, nameArray2[i], '#029699');
      // }
      // 需水满足率[显隐]
      this.needWaterObj.ZSSZ03 = this.addNeedWater(svg, offWidth + 0, offHeight + 50, 120, 30, "#07746c",'ZSSZ03');
      this.needWaterObj.ZSSZ03.style('display','inline');

      // 总干渠相关
      let offHeightT = offHeight - 180, offWidthT = offWidth + 435
      this.drawRectWithLineArraw(svg, offWidthT, offHeightT - 20, this.rectHeight, 110, 'top', 61, '','','arrow-mark', 'dashed-line');
      // 总干渠
      offWidthT = offWidthT
      offHeightT = offHeightT + 80
      this.drawRectWithLineArraw(svg, offWidthT, offHeightT, 410, this.rectHeight, 'left', 62, '','','arrow-mark', 'dashed-line');
      this.addFontText(svg, offWidthT + 150 , offHeightT - 15, '总干渠', '#0276d6');
      // 需水满足率[显隐]
      this.needWaterObj.XGSZ07 = this.addNeedWater(svg, offWidthT + 100, offHeightT - 7, 120, 30, "#07746c",'XGSZ07');
      this.needWaterObj.XGSZ07.style('display','inline');

      // 蟠龙总干渠控制闸
      offWidthT = offWidthT + 420
      offHeightT = offHeightT + 10
      this.addImage(svg, offWidthT, offHeightT, img5, 50, 50, 59)
      this.addFontText(svg, offWidthT, offHeightT + 40, '蟠龙总干渠', '#879094');
      this.addFontText(svg, offWidthT, offHeightT + 65, '控制闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ10.x = offWidthT
      this.ZSSZ10.y = offHeightT + 65

      offHeightT = offHeightT
      offWidthT = offWidthT + 10
      this.addArrowOnly(svg, offWidthT, offHeightT, 100, 0, 'left', 104);
      // 蟠龙水库
      offHeightT = offHeightT
      offWidthT = offWidthT + 85
      this.addImage(svg, offWidthT + 30, offHeightT, img3, 50, 50, 60)
      this.addFontText(svg, offWidthT + 100, offHeightT, '蟠龙水库', '#ffffff');
      // 水位信息[显隐]
      this.waterLevelObj.SK04 = this.addFontText(svg, offWidthT + 100 , offHeightT + 20, '', '#ffffff');
      this.waterLevelObj.SK04.style('display','none');
      // 塘肚支渠控制闸
      offHeightT = offHeightT + 30
      offWidthT = offWidthT - 350
      this.addImage(svg, offWidthT, offHeightT, img2, 50, 50, 60)
      this.addFontText(svg, offWidthT + 80, offHeightT + 0, '塘肚支渠', '#879094');
      this.addFontText(svg, offWidthT + 80, offHeightT + 25, '控制闸', '#879094');
      // 水位流量开度[显隐]
      this.ZSSZ09.x = offWidthT + 80
      this.ZSSZ09.y = offHeightT + 25

      // 塘肚支渠
      offHeight = offHeightT + 17
      offWidth = offWidthT - 10
      this.drawRectWithLineArraw(svg, offWidth, offHeight, this.rectHeight, 230, 'bottom', 24, '#00442c','#07746c','arrow-mark-green', 'dashed-line-green');
      this.addFontText(svg, offWidth - 50, offHeight + 30, '塘肚支渠', '#879094');
      // let name3 = '塘肚支渠'
      // const nameArray3 = name3.split('')
      // for (let i = 0; i < nameArray3.length; i++) {
      //   this.addFontText(svg, offWidth + 35 , offHeight + 130 + i * 25, nameArray3[i], '#029699');
      // }
      // 需水满足率[显隐]
      this.needWaterObj.ZSSZ09 = this.addNeedWater(svg, offWidth + 0, offHeight + 80, 120, 30, "#07746c",'ZSSZ09');
      this.needWaterObj.ZSSZ09.style('display','inline');

      // 六和补水渠
      const lineGroup = this.drawRectWithLineArraw(svg, liuheX, liuheY -10, this.rectHeight, 220, 'bottom', 24, '#00442c','#07746c','arrow-mark-green', 'dashed-line-green');
      lineGroup.attr('transform', `rotate(60, ${this.rotatex}, ${this.rotatey})`).attr('class', 'rotate-group');
      let name4 = '六和补水渠'
      const nameArray4 = name4.split('')
      for (let i = 0; i < nameArray4.length; i++) {
        this.addFontText(svg, (liuheX + 90) - i * 18 , liuheY - 5 + i * 10, nameArray4[i], '#029699');
      }

      // 需水满足率[显隐]
      this.needWaterObj.XGSZ04 = this.addNeedWater(svg, liuheX - 150, liuheY + 50, 120, 30, "#07746c",'XGSZ04');
      this.needWaterObj.XGSZ04.style('display','inline');
      this.needWaterObj.XGSZ04.attr('transform', `rotate(-30, ${this.rotatex}, ${this.rotatey})`).attr('class', 'rotate-group1');


      // 设置默认缩放
      const defaultScale = 0.52; // 默认缩放比例
      const defaultTranslate = [143, -3]; // 默认平移偏移量 [x, y]
      svg.call(zoom.transform, d3.zoomIdentity.scale(defaultScale).translate(...defaultTranslate));   
      
      zoomed({k:defaultScale, x:defaultTranslate[0],y:defaultTranslate[1]})
    },
    // 显示需水满足率
    showNeedWaterRatio(element, value, id) {
      if (value) {
        element.style('display','inline');
        if (this.hasDispatch && this.playTime > -1) {
          element.select("text").text(`需水满足率${value}%`).style('font-weight','bold').style('fill','#ffffff')
        } else {
          element.select("text").text(`需水${value.toFixed(2)}万m³`).style('font-weight','bold').style('fill','#ffffff')
        }
        if (this.transform) {
          if (id === 'XGSZ04') {
            element.attr('transform', `rotate(-30, ${(this.rotatex) * this.transform.k + this.transform.x}, ${(this.rotatey) * this.transform.k + this.transform.y}) translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
          } else {
            element.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
          }
        }
      } else {
        element.style('display','inline');
        element.select("text").text('').style('font-weight','bold').style('fill','#ffffff')
        if (this.transform) {
          if (id === 'XGSZ04') {
            element.attr('transform', `rotate(-30, ${(this.rotatex) * this.transform.k + this.transform.x}, ${(this.rotatey) * this.transform.k + this.transform.y}) translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
          } else {
            element.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
          }
        }
      }
    },
    // 显示水位
    showWaterLevel(element, value) {
      element.style('display','inline').style('font-size', '16px');
      element.select("text").text(value).style('font-weight','bold')
      if (this.transform) {
        element.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
      }
    },
    // 显示绘制水位流量开度 value1：水位 value2：流量 value3：开度
    showDrawFlowWaterInfo(element, value1, value2, value3) {
      if (element.sw) {
        element.sw.remove();
      }
      if (element.ll) {
        element.ll.remove();
      }
      if (element.kd) {
        element.kd.remove();
      }
      let offset = 0, index = 1
      if (element.flag === 'add') {
        offset = 20;
      } else {
        offset = -20;
      }
      if (value1 || value1 === 0) {
        element.sw = this.addFontText(this.svg, element.x ,element.y + offset * index, `水位${value1}m`, '#ffffff');
        element.sw.style('font-size','16px').style('font-weight','bold');
        index = index + 1
        if (this.transform) {
          element.sw.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
        }
      }
      if (value2 || value2 === 0) {
        element.ll = this.addFontText(this.svg, element.x ,element.y + offset * index, `流量${value2}m³/s`, '#ffffff');
        element.ll.style('font-size','16px').style('font-weight','bold');
        index = index + 1
        if (this.transform) {
          element.ll.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
        }
      }
      if (value3 || value3 === 0) {
        element.kd = this.addFontText(this.svg, element.x ,element.y + offset * index, `开度${value3}m`, '#ffffff');
        element.kd.style('font-size','16px').style('font-weight','bold');
        if (this.transform) {
          element.kd.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
        }
      }
    },
    // 显示绘制配水、水位、流量 value1：配水 value2：水位 value3：流量
    showDrawBzInfo(element, value1, value2, value3) {
      if (element.ps) {
        element.ps.remove();
      }
      if (element.sw) {
        element.sw.remove();
      }
      if (element.ll) {
        element.ll.remove();
      }
      let offset = 0, index = 1
      if (element.flag === 'add') {
        offset = 20;
      } else {
        offset = -20;
      }
      if (value1 || value1 === 0) {
        element.ps = this.addFontText(this.svg, element.x ,element.y + offset * index, `配水${value1}万m³`, '#ffffff');
        element.ps.style('font-size','16px').style('font-weight','bold');
        index = index + 1
        if (this.transform) {
          element.ps.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
        }
      }
      if (value2 || value2 === 0) {
        element.sw = this.addFontText(this.svg, element.x ,element.y + offset * index, `水位${value2}m`, '#ffffff');
        element.sw.style('font-size','16px').style('font-weight','bold');
        index = index + 1
        if (this.transform) {
          element.sw.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
        }
      }
      if (value3 || value3 === 0) {
        element.ll = this.addFontText(this.svg, element.x ,element.y + offset * index, `流量${value3}m³/s`, '#ffffff');
        element.ll.style('font-size','16px').style('font-weight','bold');
        if (this.transform) {
          element.ll.attr('transform', `translate(${this.transform.x}, ${this.transform.y}) scale(${this.transform.k})`);
        }
      }
    },
    // 绘制带箭头的矩形框
    drawRectWithLineArraw(svg, rectX, rectY, rectWidth, rectHeight, direction, index, fillColor, strokeColor, arrowClass, lineClass) {
      const lineGroup = svg.append('g').attr('class', 'line-group');
      // 定义箭头标记
      const defs = lineGroup.append('defs');
      let refX = 0
      let refY = 0
      let arrawPath = ''
      if (direction === 'right') {
        refX = 15
        refY = 5
        arrawPath = 'M 0 0 L 10 5 L 0 10 z'
      } else if (direction === 'left') {
        refX = -5
        refY = 5
        arrawPath = 'M 10 0 L 0 5 L 10 10 z'
      } else if (direction === 'bottom') {
        refX = 15
        refY = 5
        arrawPath = 'M 0 0 L 10 5 L 0 10 z'
      } else if (direction === 'top') {
        refX = -5
        refY = 5
        arrawPath = 'M 10 0 L 0 5 L 10 10 z'
      }

      defs.append('marker')
          .attr('id', 'arrowhead' + index)
          .attr('viewBox', '0 0 10 10')
          .attr('refX', refX)
          .attr('refY', refY)
          .attr('markerWidth', 6)
          .attr('markerHeight', 6)
          .attr('orient', 'auto')
          .append('path')
          .attr('d', arrawPath)
          .attr('class', arrowClass);

      // 绘制矩形
      lineGroup.append('rect')
          .attr('x', rectX)
          .attr('y', rectY)
          .attr('width', rectWidth)
          .attr('height', rectHeight)
          .attr("rx", 10) // x轴方向上的半径
          .attr("ry", 10) // x轴方向上的半径
          .attr('fill', fillColor || '#003844')
          .attr('stroke', strokeColor || '#074762')
          .attr('stroke-width', 2);

      // 计算虚线的起点和终点（矩形两边的中点）
      let lineStartX = rectX + 5;
      let lineStartY = rectY + rectHeight/2;
      let lineEndX = rectX + rectWidth - 5;
      let lineEndY = rectY + rectHeight/2;
      if (direction === 'top' || direction === 'bottom') {
        lineStartX = rectX + rectWidth/2
        lineStartY = rectY + 5
        lineEndX = rectX  + rectWidth/2
        lineEndY = rectY + rectHeight - 5
      }

      // 生成路径数据
      const lineData = [{ x: lineStartX, y: lineStartY }, { x: lineEndX, y: lineEndY }];

      // 生成路径
      const line = d3.line()
          .x(d => d.x)
          .y(d => d.y);

      let merkerPosition = 'marker-end'
      if (direction === 'right' || direction === 'bottom') {
         merkerPosition = 'marker-end'
      } else {
        merkerPosition = 'marker-start'
        // lineData.reverse()
      }
      // 添加路径到 SVG
      lineGroup.append('path')
          .datum(lineData)
          .attr('d', line)
          .attr('class', lineClass)
          .attr(merkerPosition, `url(#arrowhead${index})`); // 应用箭头标记
      
      return lineGroup;
    },
    // 添加箭头
    addArrowOnly(svg, rectX, rectY, rectWidth, rectHeight, direction, index) {
      const lineGroup = svg.append('g').attr('class', 'line-group');
      // 定义箭头标记
      const defs = lineGroup.append('defs');
      let refX = 0
      let refY = 0
      let arrawPath = ''
      if (direction === 'right') {
        refX = 15
        refY = 5
        arrawPath = 'M 0 0 L 10 5 L 0 10 z'
      } else if (direction === 'left') {
        refX = -5
        refY = 5
        arrawPath = 'M 10 0 L 0 5 L 10 10 z'
      } else if (direction === 'bottom') {
        refX = 15
        refY = 5
        arrawPath = 'M 0 0 L 10 5 L 0 10 z'
      } else if (direction === 'top') {
        refX = -5
        refY = 5
        arrawPath = 'M 10 0 L 0 5 L 10 10 z'
      }

      defs.append('marker')
          .attr('id', 'arrowhead1' + index)
          .attr('viewBox', '0 0 10 10')
          .attr('refX', refX)
          .attr('refY', refY)
          .attr('markerWidth', 6)
          .attr('markerHeight', 6)
          .attr('orient', 'auto')
          .append('path')
          .attr('d', arrawPath)
          .attr('class', 'only-arrow');

      // 计算虚线的起点和终点（矩形两边的中点）
      let lineStartX = rectX + 5;
      let lineStartY = rectY + rectHeight/2;
      let lineEndX = rectX + rectWidth - 5;
      let lineEndY = rectY + rectHeight/2;
      if (direction === 'top' || direction === 'bottom') {
        lineStartX = rectX + rectWidth/2
        lineStartY = rectY
        lineEndX = rectX  + rectWidth/2
        lineEndY = rectY + rectHeight
      }

      // 生成路径数据
      const lineData = [{ x: lineStartX, y: lineStartY }, { x: lineEndX, y: lineEndY }];

      // 生成路径
      const line = d3.line()
          .x(d => d.x)
          .y(d => d.y);

      let merkerPosition = 'marker-end'
      if (direction === 'right' || direction === 'bottom') {
         merkerPosition = 'marker-end'
      } else {
        merkerPosition = 'marker-start'
        // lineData.reverse()
      }
      // 添加路径到 SVG
      lineGroup.append('path')
          .datum(lineData)
          .attr('d', line)
          .attr('class', 'only-arrow-line')
          .attr(merkerPosition, `url(#arrowhead1${index})`); // 应用箭头标记
      
      return lineGroup;
    },
    // 添加文字
    addFontText(svg, x, y, fontText, fillColor, fontSize) {
      const textGroup = svg.append('g').attr('class', 'line-group');
      textGroup.append('text')
      .attr('x', x)       // 设置文字的x坐标
      .attr('y', y)       // 设置文字的y坐标
      .attr('text-anchor', 'middle') // 设置文字锚点为中间，这样文字会围绕x坐标居中
      .attr('dominant-baseline', 'middle') // 设置文字基线为中间，这样文字会围绕y坐标垂直居中
      .text(fontText)
      .style('fill', fillColor); // 设置文字内容
       return textGroup
  
      // 添加鼠标悬浮事件
      // textGroup.on("mouseover", function() {
      //       d3.select(this).classed("highlight", true);
      //   })
      //   .on("mouseout", function() {
      //       d3.select(this).classed("highlight", false);
      //   });
    },
    // 添加图片
    addImage(svg, x, y, imageUrl, width, height, opacity) {
      const imgGroup = svg.append('g').attr('class', 'line-group');
      // 添加一个image元素
      const image = imgGroup.append('image')
        .attr('xlink:href', imageUrl) // 设置图片的URL
        .attr('x', x - width/2) // 设置图片的x坐标
        .attr('y', y - height/2) // 设置图片的y坐标
        .attr('width', width || 50) // 设置图片的宽度
        .attr('height', height || 50); // 设置图片的高度
      
      // 你还可以设置图片的其他样式属性，比如透明度
      image.style('opacity', opacity || 1);

      // const circle = imgGroup.append("circle")
      //       .attr("cx", x)
      //       .attr("cy", y)
      //       .attr("r", 50)
      //       .attr('fill', 'rgba(0,0,0,0)')
      //       .attr("stroke", "lightblue"); 

      // // 添加鼠标悬浮事件
      // circle.on("mouseover", function() {
      //       d3.select(this).classed("highlightstroke", true);
      //   })
      //   .on("mouseout", function() {
      //       d3.select(this).classed("highlightstroke", false);
      //   });
    },
    addDashRect(svg, x, y, width, height) {
      const rectGroup = svg.append('g').attr('class', 'line-group');
      rectGroup.append("rect")
            .attr("x", x)
            .attr("y", y)
            .attr("width", width)
            .attr("height", height)
            .attr("fill", "none") // 无填充颜色
            .attr("stroke", "green") // 边框颜色
            .attr("stroke-width", 1) // 边框宽度
            .attr("stroke-dasharray", "5,5"); // 虚线样式 (5px实线, 5px空白)
    },
    // 需水满足率
    addNeedWater(svg, x, y, width, height, color, code) {
      let rectX = 0, rectY = 0, rectW = 0, rectH = 0, textX = x, textY = y,
          areaX = x, areaY = y, name = '',name2='';
      switch (code) {
        case 'ZSSZ01': // 地豆冲支渠
          rectX = x -50;
          rectY = y - 50;
          rectW = width + 80;
          rectH = height + 130;
          textX = textX;
          textY = textY
          areaX = areaX + 30;
          areaY = areaY + 60;
          name = '地豆冲支渠';
          name2 = '灌溉片区';
          break;
        case 'XGSZ01': // 地豆冲引水渠
          rectX = x - 50;
          rectY = y - 50;
          rectW = width + 80;
          rectH = height + 150;
          textX = textX;
          areaX = areaX + 25;
          areaY = areaY + 50;
          name = '地豆冲引水渠';
          name2 = '灌溉片区';
          break;
        case 'BZ1': // 蒙山泵站
          rectX = x - 150;
          rectY = y - 10;
          rectW = width + 180;
          rectH = height + 30;
          textX = textX + 95;
          textY = textY + 15;
          name = '蒙山泵站';
          areaX = areaX + 25;
          areaY = areaY + 15;
          name2 = '灌溉片区';
          break;
        case 'XGSZ03': // 二级干渠
          rectX = x - 30;
          rectY = y - 10;
          rectW = width + 100;
          rectH = height + 70;
          textX = textX;
          textY = textY + 20;
          name = '二级干渠';
          areaX = areaX + 5;
          areaY = areaY + 50;
          name2 = '灌溉片区';
          break;
        case 'XGSZ06': // 石龙干渠
          rectX = x +10;
          rectY = y - 15;
          rectW = width + 170;
          rectH = height + 10;
          textY = textY + 25;
          textX = textX + 55;
          name = '石龙干渠灌溉片区';
          areaX = areaX + 55;
          areaY = areaY + 5;
          break;
        case 'XGSZ07': // 总干渠
          rectX = x + 100;
          rectY = y - 20;
          rectW = width + 80;
          rectH = height + 20;
          textX = textX + 120;
          textY = textY + 26;
          name = '总干渠灌溉片区';
          areaX = areaX + 140;
          areaY = areaY + 5;
          break;
        case 'ZSSZ06': // 六和干渠
          rectX = x - 60;
          rectY = y - 15;
          rectW = width + 90;
          rectH = height + 10;
          textY = textY + 25;
          name = '六和干渠灌溉片区';
          areaX = areaX - 30;
          areaY = areaY + 5;
          break;
        case 'ZSSZ03': // 利民支渠
          rectX = x - 50;
          rectY = y - 30;
          rectW = width;
          rectH = height + 70;
          textX = textX - 45;
          name = '利民支渠';
          areaX = areaX - 25;
          areaY = areaY + 20;
          name2 = '灌溉片区';
          break;
        case 'ZSSZ09': // 塘肚支渠
          rectX = x - 50;
          rectY = y - 30;
          rectW = width;
          rectH = height + 150;
          textX = textX - 45;
          textY = textY + 30;
          name = '塘肚支渠';
          areaX = areaX - 25;
          areaY = areaY + 60;
          name2 = '灌溉片区';
          break;
        case 'XGSZ04': // 六和补水渠
          rectX = x + 35;
          rectY = y - 110;
          rectW = width - 40;
          rectH = height + 70;
          textX = textX + 40;
          textY = textY - 80;
          name = '六和补水渠';
          areaX = areaX + 35;
          areaY = areaY - 60;
          name2 = '灌溉片区';
          break;
        default:
          rectX = x;
          rectY = y;
          rectW = width;
          rectH = height;
      }

      const rectGroup = svg.append('g').attr('class', 'line-group');
      rectGroup.append("rect")
        .attr("x", rectX)
        .attr("y", rectY)
        .attr("width", rectW)
        .attr("height", rectH)
        .attr("stroke", color)
        .attr("fill", "none")
        .attr("stroke-dasharray", "5,5") // 虚线样式
        .attr("stroke-width", 3);

      // 需水情况
      rectGroup.append("text")
            .attr("x", textX)
            .attr("y", textY)
            .attr("font-size", "16px")
            .attr("color", "#ffffff")
            .text("");

      // 灌溉片区名称
      rectGroup.append("text")
            .attr("x", areaX)
            .attr("y", areaY)
            .attr("font-size", "16px")
            .attr("fill", "#38f9cb")
            .text(name);
      rectGroup.append("text")
            .attr("x", areaX)
            .attr("y", areaY + 20)
            .attr("font-size", "16px")
            .attr("fill", "#38f9cb")
            .text(name2);
    
      return rectGroup
    }
  },  
  beforeDestroy() {   
   
  }  
};  
</script>
<style>
  .svg-warper {
    position: relative;
    width:100%;
    height:700px;
  }
  .svg-container {
    position: absolute;
    width:100%;
    left: 0;
    right: 0;
    height:auto;
    background-color: #000;
  }
  .dashed-line {
    fill: none;
    stroke: #00b4df;
    stroke-width: 2px;
    stroke-dasharray: 10, 10; /* 定义虚线模式 */
  }
  .arrow-mark {
    fill: #00b4df;
  }
  .line-group {
    fill: #fff;
    font-size: 20px;
    /* text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue; */
  }
  .rotate-group1 {
    color:#fff;
  }
  .line-group-green {
    fill: #029699;
    font-size: 20px;
    /* text-shadow: -1px -1px 0 blue, 1px -1px 0 blue, -1px 1px 0 blue, 1px 1px 0 blue; */
  }
  .arrow-mark-green {
    fill: #00b399;
  }
  .dashed-line-green {
    fill: none;
    stroke: #00b399;
    stroke-width: 2px;
    stroke-dasharray: 10, 10; /* 定义虚线模式 */
  }
  .highlight {
    /* font-weight: bold; */
  }
  .highlightstroke {
    /* stroke: red;
    stroke-width: 1px; */
  }
  .only-arrow {
    fill: #56d4ff;
  }
  .only-arrow-line {
    fill: none;
    stroke: #2077bc;
    stroke-width: 2px;
  }
  .legend-warper {
    position: absolute;
    top: 25px;
    right: 0px;
    width: 120px;
    height: 185px;
    border-radius: 8px;
    opacity: 1;
    z-index: 10;
    /* background: linear-gradient(0deg, rgba(8, 22, 31, 0.9), rgba(8, 22, 31, 0.9)), radial-gradient(120% 41% at 50% 96%, rgba(14, 98, 61, 0.9) 0%, rgba(16, 51, 45, 0) 100%); */
    border: 1px solid rgba(23, 248, 195, 0.4361);
    /* border-image: linear-gradient(180deg, rgba(23, 248, 195, 0.4361) 1%, rgba(85, 241, 129, 0.2) 100%) ; */
  }
  .legend-warper .title {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #FFFFFF;
    padding: 10px 12px;
  }
  .legend-warper .legend-item {
    padding: 7px 12px;  
    display: flex;
  }
  .legend-warper .img1 {
    width: 20px;
    height: 20px;
    background: url("@/assets/image/sk.png") center no-repeat;
    background-size: cover;
  }
  .legend-warper .img2 {
    width: 20px;
    height: 20px;
    background: url("@/assets/image/bz.png") center no-repeat;
    background-size: cover;
  }
  .legend-warper .img3 {
    width: 20px;
    height: 20px;
    background: url("@/assets/image/sz.png") center no-repeat;
    background-size: cover;
  }
  .legend-warper .img4 {
    width: 20px;
    height: 20px;
    background: url("@/assets/image/gsw.png") center no-repeat;
    background-size: cover;
  }
  .legend-warper .item-name {
    font-size: 14px;
    font-weight: normal;
    line-height: normal;
    color: #D2F3FF;
    margin-left: 10px;
  }
</style>